<template>
	<view class="peripheral">
		<view class="withdrawal-bg">
			<view class="withdrawal-flex">
				<view class="commission-wrap">
					<view class="commission">可提现佣金</view>
					<view>￥<text>{{dataList.calculatingWage}}</text></view>
				</view>
				<navigator url="/pages/mine/distribution/withdrawal" class="withdrawal">提现</navigator>
			</view>
		</view>
		<view class="middle">
			<view class="distribution-flex-wrap">
				<view class="distribution-flex">
					<view class="distribution-content agent">{{dataList.commission}}</view>
					<view class="distribution-content agent">{{dataList.inviteCount}}</view>
					<view class="distribution-content agent">{{dataList.consumerCount}}</view>
				</view>
				<view class="distribution-flex">
					<view class="distribution-content distribution-quantity">分销等级</view>
					<view class="distribution-content distribution-quantity">邀请人数</view>
					<view class="distribution-content distribution-quantity">消费人数</view>
				</view>
				<view class="distribution-flex">
					<view class="distribution-content agent">{{dataList.totalCommission}}</view>
					<view class="distribution-content agent">{{dataList.turnover}}</view>
					<view class="distribution-content agent">{{dataList.totalConsumerPrice}}</view>
				</view>
				<view class="distribution-flex">
					<view class="distribution-content distribution-quantity">累计获得佣金</view>
					<view class="distribution-content distribution-quantity">成交单量</view>
					<view class="distribution-content distribution-quantity">累计消费金额</view>
				</view>
			</view>
		</view>
		<view class="distribution-end">
			<navigator url="/pages/mine/distribution/withdrawal-record" class="distribution-end-cell">
				<image src="../../../static/emption/time.png" mode=""></image>
				<view class="text">提现记录</view>
			</navigator>
			<view class="distribution-end-cell" @click="show()">
				<image src="../../../static/emption/time.png" mode=""></image>
				<view class="text">分销二维码</view>
			</view>
			<!-- 弹窗开始 -->
			<view >
				<popup custom-class="demo-popup" position="center" v-model="visible">
					<view class="">
						<image class="popup-code" src="../../../static/code.jpg" mode=""></image>
					</view>					
				</popup>
			</view>
			<!-- 弹窗结束 -->
			<navigator url="/pages/mine/distribution/distribution-explain" class="distribution-end-cell">
				<image src="../../../static/emption/time.png" mode=""></image>
				<view class="text">分销说明</view>
			</navigator>
			<navigator url="/pages/mine/distribution/invitation-list" class="distribution-end-cell">
				<image src="../../../static/emption/time.png" mode=""></image>
				<view class="text">邀请列表</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import popup from '../../../components/s-popup/index.vue'
	export default {
		components: {
			popup
		},
		data() {
			return {
				visible: false,
				dataList:{}
			}
		},
		onLoad() {
		
		},
		onShow() {
			this.getdata()
		},
		methods: {			
			show(){
				this.visible = true;
			},
			getdata(){
				this.$http.postReq("/api/sale/index",).then(res => {
					this.dataList=res.data
				});
			}
		}		
	}
	
</script>

<style>
	.peripheral {
		padding: 36rpx;
		background-color: #F6F4F5;
		height: 1300rpx;
	}

	.withdrawal-bg {
		background-color: #F8526A;
		border-radius: 25rpx;
		position: relative;
	}

	.withdrawal-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0rpx 25rpx;
		padding: 50rpx 0;
	}

	.commission-wrap {
		font-size: 35rpx;
		color: #fff;
	}

	.commission {
		margin-bottom: 15rpx;
	}

	.commission-wrap text {
		font-weight: 700;
		font-size: 40rpx;
	}

	.withdrawal {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 10rpx 24rpx;
		font-size: 30rpx;
	}

	.middle {
		background-color: #fff;
		margin-top: -24rpx;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
	}

	.distribution-flex-wrap {
		padding: 30rpx;
		padding-top: 60rpx;
	}

	.distribution-flex {
		display: flex;
	}

	.distribution-content {
		width: 50%;
		text-align: center;
		margin-bottom: 20rpx;
		color: #444C53;
	}

	.agent {
		font-size: 35rpx;

	}

	.distribution-quantity {
		font-size: 29rpx;
	}

	.distribution-end {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.distribution-end-cell {
		text-align: center;
	}

	.distribution-end-cell image {
		width: 80rpx;
		height: 84rpx;
	}

	.text {
		color: #444C53;
		font-size: 35rpx;
	}	
	.popup-code{
		width: 400rpx;
		height: 400rpx;
		padding: 20rpx;
	}
</style>
